<!--  -->
<template>
  <div class="container">
    <div class="header">头部</div>
    <div class="menu">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :unique-opened="true"
        :router="true"
      >
        <el-sub-menu
          :index="menu.id + ''"
          v-for="menu in newMenus"
          :key="menu.id"
        >
          <template #title>
            <span>{{ menu.title }}{{ menu.name }}</span>
          </template>

          <template v-for="subMenu in menu.children">
            <el-menu-item
              :index="`/${menu.name}/${subMenu.name}`"
              v-if="!subMenu.hidden"
              :key="subMenu.id"
            >
              {{ subMenu.title }}{{ menu.name }}/{{ subMenu.name }}
            </el-menu-item>
          </template>
        </el-sub-menu>

        <!-- <el-sub-menu
          :index="menu.id + ''"
          v-for="menu in newMenus"
          :key="menu.id"
        >
          <template #title>
            <span>{{ menu.title }}</span>
          </template>
          <template v-for="submenu in menu.children">
            <el-menu-item
              :index="'/' + menu.name + '/' + submenu.name"
              v-if="!submenu.hidden"
              :key="submenu.id"
              >{{ submenu.title }}</el-menu-item
            >
          </template>
        </el-sub-menu> -->
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";

interface MenuObj {
  parentId: number;
  id: number;
  title: string;
  hidden: 0 | 1;
  children?: MenuObj[];
  name: string;
}
interface NewMenus {
  [key: number]: MenuObj;
}
const store = useStore();
const newMenus = computed<NewMenus>(() => store.getters.getNewMenus);
// const newMenus: NewMenus = store.getters.getNewMenus;
</script>



<style lang='less' scoped>
.container {
  height: 100%;
  position: relative;
  .header {
    height: 70px;
    background-color: rgb(62, 62, 213);
  }
  .menu {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: rgb(43, 43, 68);
  }
  .content {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 250px;
    right: 0;
    background-color: aliceblue;
  }
}
</style>